<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 80% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCThe9nmlAfVeM6L30LlWjSfGXEwjnhRxs&sensor=false">
</script>
<script src="/static/jQuery.js"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    // TODO: interface: center where most of the friends are
    var latlng = new google.maps.LatLng(40.14472135665691, -44.78593826293945);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var friendsLocations = jQuery.parseJSON($('<div />').html("{{ locations }}").text());
    for (var i = 0; i < friendsLocations.length; i++) {
        var location = new google.maps.LatLng(friendsLocations[i].lat, friendsLocations[i].lng);
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            icon : '/static/bubble.png'
        });

        personalizeMarker(marker,friendsLocations[i].people,'');
    }

    var unlocalizedFriends = jQuery.parseJSON($('<div />').html("{{ unlocalized }}").text());
    var unlocalizedFrMarker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    var title = "<p><b><i>Location is not public</i><b></p>";
    personalizeMarker(unlocalizedFrMarker,unlocalizedFriends.people,title);

    function personalizeMarker(marker,people,title) {

        var contentBody = "";
        var allNames = "";
        for (var i = 0; i < people.length; i++) {
            var picture = 'http://graph.facebook.com/' + people[i].id + '/picture';
            contentBody += '<table><tr>';
            contentBody += '<td><img src=\"' + picture + '\"/></td>';
            contentBody += '<td><a href="http://www.facebook.com/' + people[i].id +'">' + people[i].name + '</a></td>';
            contentBody += '</td></tr></table>';
            allNames += people[i].name + ",";
        }

        var contentString =  '<div id="content">'+
                '<div id="siteNotice">'+ title +
                '</div>'+
                '<div id="bodyContent">'+
                '' + contentBody + ''+
                '</div>'+
                '</div>';
        marker.title = allNames.substring(0,allNames.length - 1);

        var infoWindow = new google.maps.InfoWindow({
            content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.open(map,marker);
        });
    }
  }

</script>
</head>
<body onload="initialize()">
<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=198942823512347";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

  <div id="map_canvas" style="width:100%; height:80%; text-align: center;"></div>
<table>
    <tr>
        <td>
            <div class="fb-like" data-href="https://apps.facebook.com/friendwiz" data-send="true" data-width="450" data-show-faces="false"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="fb-comments" data-href="https://apps.facebook.com/friendwiz" data-num-posts="4" data-width="500"></div>
        </td>
    </tr>
</table>
</body>
</html>